<template>
    <div class="record-container">
        <div class="record-header">
            <label for="username">用户名: </label><input placeholder="输入要搜索的用户名" id="username" v-model="username"/>
            <label for="recordid">订单编号: </label><input placeholder="输入要搜索的订单编号" id="recordid" v-model="searchId"/>
            <div class="imgButton" @click="search">
                <img src="@/assets/search.png"/>
                搜索
            </div>
            <div class="imgButton" @click="reset">
                <img src="@/assets/reset.png"/>
                重置
            </div>
        </div>
        <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">订单号</th>
                <th scope="col">用户号</th>
                <th scope="col">用户名</th>
                <th scope="col">订单时间</th>
                <th scope="col">总价格</th>
                <th scope="col">查看详情</th>
                <th scope="col">删除</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in showRecords.slice(page*pageSize,page*pageSize+pageSize)" :key="item.recordsId">
                <th scope="row">{{ page*pageSize+index }}</th>
                <td>{{ item.recordsId }}</td>
                <td>{{ item.openId }}</td>
                <td>{{ item.username }}</td>
                <td>{{ item.time }}</td>
                <td>￥{{ item.totalPrice.toFixed(1) }}</td>
                <td @click="jumpToDetail(item)" class="td-button">查看</td>
                <td @click="deleteIt(item)" class="td-button">删除</td>
              </tr>
            </tbody>
        </table>
        <div class="record-bottom">
            <h6>共{{ totalPage }}页</h6>
            <div class="svg-container" @click="delPage">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                </svg>
            </div>
            <div class="page-show">{{ page+1 }}</div>
            <div class="svg-container" @click="addPage">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                </svg>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    computed:{
        totalPage(){
            return Math.ceil(this.originRecords.length/this.pageSize)
        }
    },
    data(){
        return {
            originRecords:[],
            showRecords:[],
            page:0,
            pageSize:7,
            username:'',
            searchId:''
        }
    },
    methods:{
        addPage(){
            if(this.page+2>this.totalPage)
                return
            this.page++
        },
        delPage(){
            if(this.page-1<0)
                return
            this.page--
        },
        reset(){
            this.showRecords = this.originRecords.slice(0)
            this.page = 0
            this.username = ''
            this.searchId = ''
        },
        search(){
            if(this.username!==''&&this.searchId!=''){
                this.page = 0
                console.log('出发了双重判断')
                this.showRecords = this.originRecords.filter(item=>item.username===this.username&&item.recordsId==this.searchId)
            }else if(this.username!==''){
                this.page = 0
                console.log('出发了用户名判断')
                this.showRecords = this.originRecords.filter(item=>item.username===this.username)
            }else if(this.searchId!=''){
                this.page = 0
                console.log('出发了订单号判断')
                this.showRecords = this.originRecords.filter(item=>item.recordsId==this.searchId)
            }
        },
        async deleteIt(item){
            let {data:ret} = await this.$http.get('/deleteRecordById/'+item.recordsId)
            if(ret.affectedRows>0){
                let {data:res} = await this.$http.get('/getRecords')
                this.originRecords = res
                this.showRecords = res.slice(0)
                return alert('删除成功!')
            }
            alert('删除失败!')
        },
        jumpToDetail(item){
            console.log(item)
            this.$router.push({
                path:'/manager/recordDetail',
                query:item
            })
        }
    },
    async created(){
        let {data:ret} = await this.$http.get('/getRecords')
        this.originRecords = ret
        this.showRecords = ret.slice(0)
    }
}
</script>

<style lang="less">
    .record-container{
        width: 95%;
        height: 95%;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        flex-direction: column;
        .td-button{
            color: #C00000;
            cursor: pointer;
        }
        .td-button:hover{
            color: #780000;
            font-weight: bold;
        }
        .record-bottom{
            display: flex;
            align-items: center;
            justify-content: right;
            div{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                cursor: pointer;
            }
            .page-show{
                border: 1px solid #314fa0;
                width: 30px;
                border-radius: 5px;
            }
            h6{
                margin:0;
            }
        }
        .record-header{
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            label{
                margin: 0;
                margin-right: 10px;
                font-size: 15px;
            }
            input{
                border: 1px solid #979696;
                box-sizing: border-box;
                border-radius: 5px;
                padding: 5px;
                margin-right: 10px;
            }
            .imgButton{
                cursor: pointer;
                background-color: #314fa0;
                box-sizing: border-box;
                padding: 2px;
                width: 60px;
                color: #ffffff;
                display: flex;
                font-size: 15px;
                align-items: center;
                justify-content: space-around;
                margin-right: 15px;
                border-radius: 5px;
                img{
                    width: 20%;
                }
                
            }
        }
    }
</style>